<template>
    <div class='clinc-page'>
        <el-card class="top">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="行政区划">
                    <el-select v-model="formInline.area" placeholder="行政区划">
                        <el-option :label="item.name" :value="item.value" v-for="item in List.area" :key="item.id">{{
                            item.name }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="门诊类别">
                    <el-select v-model="formInline.target" placeholder="门诊类别">
                        <el-option :label="item.target" :value="item.value" v-for="item in List.target"
                            :key="item.id">{{
                                item.name }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="医生姓名">
                    <el-input v-model="formInline.doctorName" placeholder="医生姓名"></el-input>
                </el-form-item>
                <el-form-item label="流水号">
                    <el-input v-model="formInline.lsh" placeholder="流水号"></el-input>
                </el-form-item>
                <el-form-item label="门诊时间">
                    <el-date-picker v-model="formInline.date" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="ruset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="bottom">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="门诊日期">
                </el-table-column>
                <el-table-column prop="lsh" label="流水号">
                </el-table-column>
                <el-table-column prop="departments" label="科室" width="100">
                </el-table-column>
                <el-table-column prop="area" label="行政区划" width="120">
                </el-table-column>
                <el-table-column prop="doctorName" label="负责医生">
                </el-table-column>
                <el-table-column prop="target" label="门诊类别">
                </el-table-column>
                <el-table-column prop="cost" label="门诊费用">
                </el-table-column>
                <el-table-column prop="category" label="门诊详情">
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import { healthAPI } from '@/http';
export default {
    name: 'clinc-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: 'clinc-page',
            date: [],
            List: {
                area: [],
                target: [],
            },
            formInline: {},
            tableData: [],
        }
    },
    created() {
        this.getArea();
        this.getTarget();
        this.getDataList()
    },
    methods: {
        newDate(val) {
            var date = val ? val : new Date()
            var year = date.getFullYear(); // 获取年份
            var month = date.getMonth() + 1; // 获取月份（注意月份从0开始）
            var day = date.getDate(); // 获取日期
            return "" + year + "-" + String(month).padStart(2, '0') + "-" + String(day).padStart(2, '0');
        },
        getDataList() {
            let params = Object.assign({
                limit: 5,
                page: 1,
                startTime: this.formInline.date ? this.newDate(this.formInline.date[0]) : '1970-01-01',
                endTime: this.formInline.date ? this.newDate(this.formInline.date[1]) : this.newDate(),
            }, this.formInline);
            // console.log('asdcasd', params);
            healthAPI.getDetailListAPI(params).then(res => {
                // console.log('asdfasdfasdf', res);
                if (res.code === 200) {

                    this.tableData = res.data;
                }
            })
        },
        getArea() {
            healthAPI.getAreaListAPI().then(res => {
                console.log('城市', res);
                this.List.area = res.data;
            })
        },
        getTarget() {
            healthAPI.getTargetListAPI().then(res => {
                console.log('menz', res);
                this.List.target = res.data;
            })
        },
        onSubmit() {
            this.getDataList();
        },
        ruset() {
            let obj = {}
            this.formInline = obj
            console.log('dsadfasdfas');
        }
    }
}
</script>

<style scoped lang="less">
.clinc-page {
    .bottom {
        margin-top: 20px;
    }
}
</style>